import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core'

@Component({
  selector: 'app-ex0201',
  templateUrl: './ex0201.component.html',
  styleUrls: ['./ex0201.component.scss']
})
export class Ex0201Component implements OnInit, AfterViewInit {
  private ctx: any
  private ctx2: any
  private ctx3: any
  private ctx4: any
  private ctx5: any
  private ctx6: any
  private ctx7: any
  private ctx8: any
  private ctx9: any

  @ViewChild('canvas')
  set canvas(ref: ElementRef) {
    this.ctx = ref.nativeElement.getContext('2d')
  }

  @ViewChild('canvas2')
  set canvas2(ref: ElementRef) {
    this.ctx2 = ref.nativeElement.getContext('2d')
  }

  @ViewChild('canvas3')
  set canvas3(ref: ElementRef) {
    this.ctx3 = ref.nativeElement.getContext('2d')
  }

  @ViewChild('canvas4')
  set canvas4(ref: ElementRef) {
    this.ctx4 = ref.nativeElement.getContext('2d')
  }

  @ViewChild('canvas5')
  set canvas5(ref: ElementRef) {
    this.ctx5 = ref.nativeElement.getContext('2d')
  }

  @ViewChild('canvas6')
  set canvas6(ref: ElementRef) {
    this.ctx6 = ref.nativeElement.getContext('2d')
  }

  @ViewChild('canvas7')
  set canvas7(ref: ElementRef) {
    this.ctx7 = ref.nativeElement.getContext('2d')
  }

  @ViewChild('canvas8')
  set canvas8(ref: ElementRef) {
    this.ctx8 = ref.nativeElement.getContext('2d')
  }

  @ViewChild('canvas9')
  set canvas9(ref: ElementRef) {
    this.ctx9 = ref.nativeElement.getContext('2d')
  }

  constructor() {
  }

  ngOnInit(): void {
  }

  ngAfterViewInit(): void {
    const ctx = this.ctx

    ctx.moveTo(50, 50)
    ctx.lineTo(100, 50)
    // ctx.moveTo(50, 100)
    ctx.lineTo(50, 100)
    ctx.lineTo(100, 100)
    ctx.stroke()

    this.drawTriangle()
    this.drawRectangle()

    this.strokeRectangle()
    this.fillRectangle()
    this.strokeFillRect()

    this.useRect()
    this.clearRect()
    this.beforeClearCanvas()
  }

  drawTriangle(): void {
    const ctx = this.ctx2
    ctx.moveTo(50, 100)
    ctx.lineTo(150, 50)
    ctx.lineTo(150, 100)
    ctx.lineTo(50, 100)
    ctx.stroke()
  }

  drawRectangle(): void {
    const ctx = this.ctx3
    ctx.moveTo(50, 100)
    ctx.lineTo(50, 50)
    ctx.lineTo(150, 50)
    ctx.lineTo(150, 100)
    ctx.lineTo(50, 100)
    ctx.stroke()
  }

  strokeRectangle(): void {
    const ctx = this.ctx4
    ctx.strokeStyle = 'red'
    ctx.strokeRect(50, 50, 80, 80)
  }

  fillRectangle(): void {
    const ctx = this.ctx5
    ctx.fillStyle = 'HotPink'
    ctx.fillRect(50, 50, 80, 80)
  }

  strokeFillRect(): void {
    const ctx = this.ctx6
    ctx.strokeStyle = 'red'
    ctx.strokeRect(50, 50, 80, 80)
    ctx.fillStyle = '#FFE8E8'
    ctx.fillRect(50, 50, 80, 80)
  }

  useRect(): void {
    const ctx = this.ctx7
    ctx.strokeStyle = 'red'
    ctx.rect(50, 50, 80, 80)
    ctx.stroke()

    ctx.fillStyle = '#FFE8E8'
    ctx.rect(50, 50, 80, 80)
    ctx.fill()
  }

  clearRect(): void {
    const ctx = this.ctx8
    ctx.fillStyle = 'HotPink'
    ctx.fillRect(50, 50, 80, 80)
    ctx.clearRect(60, 60, 50, 50)
  }

  beforeClearCanvas(): void {
    const ctx = this.ctx9
    ctx.fillStyle = 'HotPink'
    ctx.fillRect(50, 50, 80, 80)
  }

  clearCanvas(canvas: any): void {
    canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height)
  }
}
